<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>约束</title>
</head>
<body>

<!--<div id="app">-->
    <!--<my-component></my-component>-->
<!--</div>-->

<!--<div id="app">-->
    <!--<my-component>-->
            <!--<Child></Child>-->
    <!--</my-component>-->
<!--</div>-->

<!--<div id="app">-->
    <!--<my-component></my-component>-->
<!--</div>-->


<div id="app">
    <my-component>
        <div>
            <Child></Child>
        </div>
    </my-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    // //声明局部组件
    // var Child = {
    //     render: function (createElement) {
    //         return createElement('p','这是文本内容');
    //     }
    // };
    // //声明全局组件
    // Vue.component('my-component',{
    //     render: function (createElement) {
    //         //创建一个子节点，使用组件Child
    //         var ChildNode = createElement(Child);
    //         return createElement('div',[
    //             ChildNode,
    //             ChildNode
    //         ]);
    //     }
    // });
    // var app =new Vue({
    //     el:"#app"
    // })


    // 全局注册组件
    // Vue.component('Child',{
    //     render: function (createElement) {
    //         return createElement('p','这是文本内容')
    //     }
    // });
    // Vue.component('my-component',{
    //     render: function (createElement) {
    //         return createElement('div',[
    //             this.$slots.default,
    //             this.$slots.default
    //         ]);
    //     }
    // });
    // var app = new Vue({
    //     el: "#app"
    // })


    //局部声明组件
    // var Child = {
    //     render: function (createElement) {
    //        return createElement('p','这是文本内容')
    //     }
    // };
    // Vue.component('MyComponent',{
    //     render: function (createElement) {
    //         return createElement('div',
    //           Array.apply(null, {
    //               length: 5
    //           }).map(function () {
    //               return createElement(Child);
    //           })
    //         )
    //     }
    // });
    // var app = new Vue({
    //     el: "#app"
    // })



    //全局注册组件
    Vue.component('Child',{
        render: function (createElement) {
            return createElement('p','这是文本内容')
        }
    });
    Vue.component('MyComponent',{
        render: function (createElement) {
            //克隆slot节点的方法
            function cloneVNode(vnode) {
               //递归遍历所有的子节点，并克隆
               const cloneChildren = vnode.children && vnode.children.map(function (vnode) {
                   return cloneVNode(vnode);
               });
               const cloned = createElement(
                   vnode.tag,
                   vnode.data,
                   cloneChildren
               );
               cloned.text = vnode.text;
               cloned.isComment = vnode.isComment;
               cloned.componentOptions = vnode.componentOptions;
               cloned.elm = vnode.elm;
               cloned.context = vnode.context;
               cloned.ns = vnode.ns;
               cloned.isStatic = vnode.isStatic;
               cloned.key = vnode.key;
               return cloned;
            }
            const vNodes =this.$slots.default;
            const cloneVNodes = vNodes.map(function (vnode) {
                return cloneVNode(vnode);
            });

            return createElement('div',[
                vNodes,
                cloneVNodes
            ]);
        }
    });

    var app = new Vue({
        el: "#app"
    })
</script>
</body>
</html>
